<template>
    <div>
        <div v-html="formHTML"></div>
        <el-table ref="multipleTable" :data="tableDate" tooltip-effect="dark" style="width: 100%;margin-bottom:10px" @selection-change="handleSelectionChange">
            <el-table-column align="center" label="序号" type="index" width="50">
            </el-table-column>
            <el-table-column prop="createDate" align="center" label="订单创建时间" width="160">
            </el-table-column>
            <el-table-column prop="receiveUsername" align="center" label="收件人姓名" width="100">
            </el-table-column>
            <el-table-column prop="receivePhone" align="center" label="收件人电话" width="110">
            </el-table-column>
            <el-table-column prop="totalPrice" align="center" label="价格" width="80">
            </el-table-column>
            <el-table-column prop="totalNum" align="center" label="数量" width="80">
            </el-table-column>
            <el-table-column prop="receiveAddress" align="center" label="收件人地址" show-overflow-tooltip>
            </el-table-column>
            <el-table-column align="center" label="订单状态" width="100">
                <!-- 1.已创建未支付 2.已支付未发货 3.已发货未收货 4.已收货 5.已关闭     只能关闭 已创建未支付的订单 -->
                <template slot-scope="scope">
                    <el-tag size="small">
                        {{ scope.row.status==1?'未支付':scope.row.status==2?'未发货': scope.row.status==3?'未收货':scope.row.status==4?'已收货':scope.row.status==5?'已关闭':''}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="180" v-if="activeName=='first' || activeName=='second'|| activeName=='fourth'">
                <template slot-scope="scope">
                    <el-button v-show="scope.row.status==1" type="text" size="small" @click="payOrder(scope.row)">支付订单</el-button>
                    <el-button v-show="scope.row.status==1" style="color:red" type="text" size="small" @click="closeOrder(scope.row.orderId)">取消订单</el-button>
                    <el-button v-show="scope.row.status==3" type="text" size="small" @click="getOrder(scope.row.orderId)">确认收货</el-button>
                    <el-button type="text" size="small" @click="detailOrder(scope.row.orderId)">详情</el-button>

                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="订单详情" :visible.sync="dialogTableVisible" width="50%">
            <div class="info">
                <div>收件人姓名：{{ orderDetail.receiveUsername }}</div>
                <div>收件人电话：{{ orderDetail.receivePhone }}</div>
                <div>收件人地址：{{ orderDetail.receiveAddress }}</div>
                <div>下单时间：{{ orderDetail.createDate }}</div>
                <div>订单状态：{{ orderDetail.status==1?'未支付':orderDetail.status==2?'未发货': orderDetail.status==3?'未收货':orderDetail.status==4?'已收货':orderDetail.status==5?'已关闭':''}}</div>
            </div>
            <el-table :data="orderDetail.orderItems?orderDetail.orderItems:[]">
                <el-table-column align="center" label="序号" type="index" width="60">
                </el-table-column>
                <el-table-column align="center" label="商品信息" width="100">
                    <template slot-scope="scope">
                        <img :src="scope.row.cover" alt="暂无图片" height="50px">
                    </template>
                </el-table-column>
                <el-table-column prop="name" align="center" label="名称" min-width="100">
                    <template slot-scope="scope">
                        《{{ scope.row.name}}》
                    </template>
                </el-table-column>
                <el-table-column prop="price" align="center" label="单价" min-width="80">
                    <template slot-scope="scope">
                        ￥{{ scope.row.price}}
                    </template>
                </el-table-column>
                <el-table-column prop="num" align="center" label="数量" min-width="110">
                </el-table-column>
                <el-table-column prop="totalPrice" align="center" label="小计" min-width="80">
                </el-table-column>
            </el-table>
        </el-dialog>

    </div>
</template>

<script>
import { put, get } from "@/utils/request";
import axios from "axios";
export default {
    props: ["tableDate", "activeName"],
    data() {
        return {
            formHTML: "",
            dialogTableVisible: false,
            orderDetail: {},
        };
    },
    created() {},
    mounted() {
        //
    },
    methods: {
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        selectable(row, index) {
            console.log(row);
            if (row.status == 1) {
                return true;
            }
        },
        // 取消订单
        closeOrder(id) {
            put(`/order/close/${id}`).then((res) => {
                console.log(res);
                if (res && res.message == "ok") {
                    this.$notify({
                        title: "成功",
                        message: "该订单已关闭",
                        type: "success",
                    });
                    this.$emit("reLoad", this.activeName);
                } else {
                    this.$notify.error({
                        title: "错误",
                        message: "该订单关闭失败",
                    });
                }
            });
        },
        // 支付订单
        payOrder(val) {
            put("/order/pay", {
                orderId: val.orderId,
                pathUrl: "http://localhost:8081/#/paySuccess",
                totalPrice: val.totalPrice,
            }).then((res) => {
                this.formHTML = res.data;
                this.$nextTick(() => {
                    document.forms[0].submit();
                });
            });
        },
        // 确认收货
        getOrder(orderId) {
            put(`/order/complete/${orderId}`)
                .then((res) => {
                    console.log("确认收货", res);
                    if (res && res.message == "ok") {
                        this.$message({
                            message: "收货成功！",
                            type: "success",
                        });
                        this.$emit("reLoad", this.activeName);
                    }
                })
                .catch(() => {
                    this.$message.error("收货失败！");
                });
        },
        // 查看详情
        detailOrder(orderId) {
            get(`/order/${orderId}`).then((res) => {
                if (res && res.data) {
                    console.log(9999, res.data);

                    this.orderDetail = res.data;
                    this.dialogTableVisible = true;
                }
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.info {
    border: 1px solid #ccc;
    padding: 10px 20px;
    margin-bottom: 10px;
    div {
        line-height: 30px;
    }
}
</style>
